<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<!--
				v-for指令:
						1.用于展示列表数据
						2.语法：v-for="(item, index) in xxx" :key="yyy"
						3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
		-->
<body>
<!--    准备一个容器-->
<div id="root">
    <h2>人员列表</h2>
<!--   placeholder 阴影文字 -->
    <input type="text" placeholder="请输入名字" v-model="keyWord">
    <ul>
<!-- v-for类似与循环  in of 都行   遍历数组   -->
        <li v-for="(p,index) in filPerons" :key="p.id">
            {{p.name}}-{{p.age}}--{{p.sex}}
        </li>
    </ul>


</div>
</body>
<script>
    Vue.config.productionTip = false
//用watch实现
// new Vue({
//     el:'#root',
//
//     data:{
//         keyWord:'',
//         persons:[{
//             id:'001',name:'马冬梅',age:18,sex:'女'
//         },{
//             id:'002',name:'周杰伦',age:19,sex:'男'
//         },{
//             id:'003',name:'温兆伦',age:20,sex:'男'
//         }, {
//                 id:'004',name:'周冬雨',age:21,sex:'女'
//             }],
//         //定义一个新数组来接受
//         filPersons:[]
//
//     },
//     watch:{
//         // keyWord(val){  简写
//         //     //filter() 为过滤   不能用this.persons来接收，因为会使原本的数组过滤到不存在
//         //     this.filPersons = this.persons.filter((p)=>{
//         //         //indexOf(val) 匹配字符串，若有匹配输出索引
//         //         //为-1则不匹配，且空字符串indexOf匹配出来为0，与第一个一样
//         //         return p.name.indexOf(val) !== -1
//         //     })
//         // }
//         keyWord: {
//             //立即调用 因为最开始没有persons，index的空字符可以输出，则用空字符原理，立即输入一次
//             immediate: true,
//             handler(val){
//                 this.filPersons = this.persons.filter((p)=> {
//                     //indexOf(val) 匹配字符串，若有匹配输出索引
//                     //为-1则不匹配，且空字符串indexOf匹配出来为0，与第一个一样
//                     return p.name.indexOf(val) !== -1
//                 })
//             }
//         }
//     }
//
// })

//用computed实现
    new Vue({
        el:'#root',

        data:{
            keyWord:'',
            persons:[{
                id:'001',name:'马冬梅',age:18,sex:'女'
            },{
                id:'002',name:'周杰伦',age:19,sex:'男'
            },{
                id:'003',name:'温兆伦',age:20,sex:'男'
            }, {
                id:'004',name:'周冬雨',age:21,sex:'女'
            }],

        },
        computed:{
            filPerons(){
                return this.persons.filter((p)=>{
                    return p.name.indexOf(this.keyWord) !== -1
                })
            }
        }


    })

</script>
</html>